<template>
    <div class="cart">
            <!-- 顶部 -->
                <van-row>
                    <van-col span="8" class="top_tui"><van-icon name="checked" />30天无忧退货</van-col>
                    <van-col span="8" class="top_tui"><van-icon name="checked" />48小时快速退费</van-col>
                    <van-col span="8" class="top_tui"><van-icon name="checked" />满88元免邮费 </van-col>
                </van-row>
            <!-- /顶部 -->
            <!-- 空购物车 -->
            <!-- <van-empty 
                class="custom-image empty_icon"
                image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                description="购物车为空"
            /> -->
            <!-- /空购物车 -->
            <!-- 商品 -->
                <van-swipe-cell>
                    <van-card
                        num="2"
                        price="2.00"
                        desc="描述信息"
                        title="商品标题"
                        class="goods-card"
                        thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
            <!-- /商品 -->
            <van-submit-bar :price="3050" button-text="立即购买" @submit="onSubmit">
                <van-checkbox v-model="checked" >全选</van-checkbox>
                <template #tip>
                    你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
                </template>
            </van-submit-bar>
    </div>
</template>

<script>
export default {
    name: 'Wjm0714Cart',

    data() {
        return {
            checked:''
        };
    },

    mounted() {
        
    },

    methods: {
        onSubmit(){
            console.log('提交');
        },
        onClickEditAddress(){
            console.log('修改地址');
        }
    },
};
</script>

<style lang="less" >
    // html{
    //     height: 100%;
    // }
    .cart{
        position: relative;
        top: 0%;
    }
    .van-submit-bar{
        bottom: .5rem;
    }
    .custom-image .van-empty__image {
        width: 1.6rem;
        height: 1.6rem;
    }
    .empty_icon{
       margin-top: 50%;
       transform: translate(0,-50%);
    }
    .top_tui{
        font-size: .13rem ;
        font-family: 黑体;
        height: .3rem;
        line-height: .3rem;
        text-align: center;
        color: #333;
    }
    .van-icon-checked{
        color: darkred;
        padding: .05rem;
    }
    // 购物车商品
    .goods-card {
        margin: 0;
        background-color: #fff;
    }

    .delete-button {
        height: 100%;
    }
</style>